<template>
  <div class="home-wrap">
    <div class="home-header">
    <search
      :results="results"
      v-model="value"
      position="absolute"
      auto-scroll-to-top
      @on-focus="onFocus"
      @on-cancel="onCancel"
      ref="search"></search>
  </div>
  <div class="loading-container">
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
  <ul>
    <li class="loan-list" v-for="(item, index) in loanList" :key="index" @click="goLoanDetail">
      <loan-info :loan="item"></loan-info>
    </li>
  </ul>
</mt-loadmore>
  </div>
  <div class="add-new-borrower">
    <x-button type="default" action-type="button" @click.native="addNewBorrower">添加新借款人</x-button>
  </div>
  </div>
</template>

<script>
import { Search, Group, Cell, XButton } from "vux";

import Loan from "../../model/loan.js";
import LoanInfo from "../../components/loan-info/index.vue";

export default {
  components: {
    Search,
    Group,
    Cell,
    XButton,
    LoanInfo
  },
  methods: {
    onFocus() {
      console.log("on focus");
    },
    onCancel() {
      console.log("on cancel");
    },
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      this.allLoaded = true; // 若数据已全部获取完毕
      this.$refs.loadmore.onBottomLoaded();
    },
    addNewBorrower() {
      this.$router.push({
        name: "新借款人"
      });
    },
    goLoanDetail() {
      this.$router.push({
        name: '借款人信息'
      })
    }
  },
  data() {
    return {
      results: [],
      value: "支持企业名称,借款人姓名,身份证号搜索",
      allLoaded: false,
      loanList: [Loan, Loan]
    };
  }
};

function getResult(val) {
  let rs = [];
  for (let i = 0; i < 20; i++) {
    rs.push({
      title: `${val} result: ${i + 1} `,
      other: i
    });
  }
  return rs;
}
</script>
<style lang="scss">
.loan-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 5rem;
  margin-bottom: 0.5rem;
}
.add-new-borrower {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
}
</style>
